<template>
  <div>
    <van-index-bar  :sticky="false" :index-list="indexList">
      <CityItem v-for="(val,key) in cityList" :key="key" :val="val" :index="key" :hotCity="hotCity"/>
    </van-index-bar>
  </div>
</template>

<script>
import CityItem from './CityItem.vue'
import { allListApi, hotCityApi } from '@/api'
export default {
  props: ['nowCity'],
  data () {
    return {
      cityList: [],
      hotCity: [],
      indexList: []

    }
  },
  components: { CityItem },
  async created () {
    const res = await allListApi({ level: '1' })
    const res2 = await hotCityApi()
    this.cityList = res.data.body
    const newobj = { }
    newobj['当前城市'] = [this.nowCity]
    newobj['热门城市'] = res2.data.body
    const alphabet = Array.from(new Array(26), (ele, index) => {
      return String.fromCharCode(65 + index)
    })
    this.indexList = ['#', '热', ...alphabet]
    const obj = {}
    for (let i = 0; i < alphabet.length; i++) {
      const arr = []
      for (let j = 0; j < this.cityList.length; j++) {
        if (this.cityList[j].short.slice(0, 1).toUpperCase() === alphabet[i]) {
          arr.push(this.cityList[j])
        }
      }
      if (arr.length === 0) {
        obj[alphabet[i]] = ['暂无城市']
      } else {
        obj[alphabet[i]] = arr
      }
    }
    this.cityList = { ...newobj, ...obj }
    // console.log(this.cityList)
  }
}
</script>

<style lang="less" scoped>
/deep/.van-index-bar__index{
  padding: 0;
  height: 15px;
  width: 15px;
  display: block;
  line-height: 15px;
  border-radius: 10px;
  margin-top: 5px;
}
/deep/.van-index-anchor{
border-top: 1px solid #eee;
}
/deep/.van-index-bar__index--active{
  background-color: #38b97e;
  color: #fff;
}
</style>
